<template>
  <div>
    <el-row>
      <el-col :span="24" class="exp">
        <el-button
          :type="primary1"
          @click="
            () => {
              this.chooes = true;
              this.primary1 = 'primary';
              this.primary2 = 'null';
                    this.updata()
            }
          "
          ><p>
            每秒钟一只巨型蚂蚁消耗氧气量=<b style="color:yellow;">
         {{ result1 }}

            </b>
            （毫升）
          </p></el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="exp"
        ><el-button
          :type="primary2"
          @click="
            () => {
              this.chooes = false;
              this.primary1 = 'null';
              this.primary2 = 'primary';
                    this.updata()
            }
          "
          ><p>
            每秒钟一只巨型蚂蚁吸收氧气量=<b style="color:yellow;">
              {{ result2 }}
            </b>
            （毫升）
          </p></el-button
        >
      </el-col>
    </el-row>
    <div style="width:550px;height:30px;font-size:20px;margin-left:220px;">
      <p>虚拟键盘</p>
    </div>
    <el-row style="width:550px;border:1px solid #000;">
      <el-button
        type="success"
        v-for="(item, index) in numlist"
        :key="index"
        @click="recordtext(item)"
        class="btn"
        >{{ item }}</el-button
        
      >
      </el-row
    >
  </div>
</template>

<script>
export default {
  created() {
    this.result1 = this.$store.state.answer[4];
    this.result2 = this.$store.state.answer[5];
  },
  data() {
    return {
      result1: "",
      result2: "",
      chooes: "true",
      primary1: "primary",
      primary2: "null",
      numlist: [
        1,
        2,
        3,
        "+",
        "a",
        "m",
        4,
        5,
        6,
        "-",
        "b",
        "n",
        7,
        8,
        9,
        "╳",
        "h",
        ".",
        "0",
        "(",
        ")",
        "÷",
        "r",
        "删除"
      ],
    };
  },
  methods: {
        updata() {
      console.log(this.$store.state.pagenum, this.$store.state.answer);
      parent.postMessage(this.$store.state, "*");
    },
    recordtext(item) {
      if (this.chooes) {
        if (item === "删除") {
          this.result1 = this.result1.substr(0, this.result1.length - 1);
        } else {
          this.result1 = this.result1 + item;
        }
        this.$store.state.answer[4] = this.result1;
      } else {
        if (item === "删除") {
          this.result2 = this.result2.substr(0, this.result2.length - 1);
        } else {
          this.result2 = this.result2 + item;
        }
        this.$store.state.answer[5] = this.result2;
      }
      this.updata()
    },
  },
};
</script>

<style scoped>
button {
  margin: 5px;
  font-size: 20px;
  font-weight: 100;
}
.btn {
  width: 75px;
  height: 50px;
  padding: 1px;
}
.exp button {
  width: 550px;
}
.exp span {
  overflow: auto;
}
</style>
